<template>
	<view>
		<PageHead backPath="/pages/talk/index?p=1" />
		<!-- 内容区 -->
		<view class="flex flex-column flex-nowrap margin-15">
			<!-- 标题、日期、创建者 -->
			<view class="fs-white">
				<text class="flex-center fs-50 fs-strong">{{ userSelectTalk.title }}</text>
				<!-- 日期 - 创作者 -->
				<view class="flex flex-row flex-nowrap flex-justify-between mt-20 fs-gray">
					<text>{{ $u.timeFormat(userSelectTalk.creationTime, 'yyyy/mm/dd hh:MM:ss') }}</text>
					<text>发起人：{{ userSelectTalk.createrName }}</text>
				</view>
				<!-- 点赞量 查看量 -->
				<view class="flex width-per-40 mt-20">
					<!-- 点赞 -->
					<u--text
						:prefixIcon="likeIcon"
						iconStyle="font-size: 16px;color:#fff;margin-right:5px"
						color="#fff"
						:text="userSelectTalk.likes"
						class="mr-10"
						@click.once="like"
					></u--text>
					<u--text
						prefixIcon="eye"
						iconStyle="font-size: 16px;color:#fff;margin-right:5px"
						color="#fff"
						:text="userSelectTalk.views"
					></u--text>
				</view>
			</view>
			<u-line class="mt-5"></u-line>
			<!-- 内容 -->
			<Acard class="mt-30" pad="12px">
				<text class="fs-30 fs-white">内容：{{ userSelectTalk.content }}</text>
				<!-- 图片 -->
				<view v-if="userSelectTalk.img"><u--image :src="userSelectTalk.img"></u--image></view>
			</Acard>
			<!-- 评论区 -->
			<CommentSection :isArticle="false"></CommentSection>
		</view>
		<!-- 背景 -->
		<ParticleBackground />
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			likeIcon: 'thumb-up' // 点赞按钮样式
		};
	},
	mounted() {
        // 查看storage是否点赞过来改变点赞按钮图标
		uni.getStorage({
			key: `talk_liked_${this.userSelectTalk.id}`,
			success: () => {
				this.likeIcon = 'thumb-up-fill';
			}
		});
        // 增加观看数
		uni.$u.http.get('/talk/view',{params:{id:this.userSelectTalk.id}})
	},
	computed: {
		...mapState('talk', ['userSelectTalk'])
	},
	methods: {
		// 点赞
		like() {
			if (this.likeIcon !== 'thumb-up-fill') {
				this.likeIcon = 'thumb-up-fill';
				this.$store
					.dispatch('talk/likeTalk', {
						user_id: this.$store.getters.user_id,
						talk_id: this.userSelectTalk.id
					})
					.then(code => {
						if (code === 200) uni.setStorageSync(`talk_liked_${this.userSelectTalk.id}`, true);s
					});
			} else {
				uni.showToast({
					icon: 'none',
					title: '已经点过赞了'
				});
			}
		}
	}
};
</script>

<style lang="scss"></style>
